<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <p>单价是：{{price}}</p>
        <p>数量是：{{count}} <button @click="count++">数量累加</button></p>
        <p>总价格是：{{allPrice}}---{{totalPrice}}</p>
      </div>
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        price: 100,
        count: 2,
        allPrice: 0,
      };
    },
    // watch的使用
    watch: {
      /* 
        侦听count的改变，如果count改变就会触发函数
        watch可以起到侦听的作用，但是如果想要得到一个值，那么必须要先在数据中初始化这个值，然后再赋值
        watch的重心是侦听！！！computed的重心是得到一个值！！！
        所以一般来说，我们通过侦听一个或者多个属性最终的结果是得到一个值，我们还是要使用计算属性
        一般来说，我们需要监听某个属性，去做其他的事情，我们可以使用watch
      */
      count() {
        this.allPrice = this.count * this.price;
      },
    },

    // 计算属性的使用
    computed: {
      totalPrice() {
        return this.count * this.price;
      },
    },
  });
</script>
